<!--
作者：qzy
时间：20221030
说明：此组件为教学任务详情页下的课程详情的子组件，主要作用是添加、编辑助教老师
-->
<template>
  <div class="dia">
    <el-dialog
      v-model="dialogVisible"
      title="添加成员"
      width="50%"
      :before-close="handleClose"
    >
      <div v-if="action === 'add'">
        <el-autocomplete
          :fetch-suggestions="querySearchDepartment"
          placeholder="请输入教师名称"
          clearable
        />
      </div>
      <div>
        <el-table :data="action === 'add' ? teacherList : teamList" stripe style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTableRef">
          <el-table-column width="40" type="selection"/>
          <el-table-column :prop="action === 'add' ? 'name' : 'schoolTeacher.name'" label="教师名称" width="180"/>
          <el-table-column :prop="action === 'add' ? 'teacherNumber' : 'schoolTeacher.teacherNumber'" label="工号" width="180"/>
          <el-table-column prop="schoolDepartment.name" label="所属院系"/>
        </el-table>
      </div>
      <div>
        <el-pagination
          v-if="action === 'add'"
          class="pagination"
          v-model:currentPage="searchData.page"
          v-model:page-size="searchData.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <div class="button">
          <el-button v-if="action === 'add'" type="primary" @click="addTeacherTeam">添加</el-button>
          <el-button v-else type="danger" @click="addTeacherTeam">删除</el-button>
          <el-button  @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import {
  defineExpose, ref, getCurrentInstance, onMounted, defineProps,
} from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import Request from '@/api/request/request';

const { proxy } = getCurrentInstance();
interface Props {
  action: string,
  getTeamList:()=>void,
}
const props = defineProps<Props>();

const dialogVisible = ref(false); // 弹框控制
// 查询表单的参数对象
const searchData = ref({
  pageSize: 10,
  page: 1,
});
const total = ref<number>(); // 表格总数据数
const teacherIds = ref([]);// 选中的学生id集合
const teacherList = ref([]); // 当前教学任务主负责老师信息
const teamList = ref([]); // 当前教学任务助教老师信息
// eslint-disable-next-line radix
const teachingTaskId = parseInt(sessionStorage.getItem('teachingTaskId') as string); // 当前教学任务id
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); // 消除el多选框变量

// 获取当前教学任务主负责老师信息
const getTeacherList = async () => {
  const resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHER_MANAGE, null, {
    params: searchData.value,
  }).get();
  if (resData.code === 200) {
    teacherList.value = resData.data.data;
    total.value = resData.data.totalRecords;
    props.getTeamList();
  }
};

// 获取教学团队集合
const getTeamList = async () => {
  const resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKTEACHER_MANAGE, null, {
    params: {
      teachingTaskId,
    },
  }).get();
  if (resData.code === 200) {
    teamList.value = resData.data.data;
  }
};

onMounted(() => {
  getTeacherList();
  getTeamList();
});

// 当用户点击修改每页数据总数时触发
const handleSizeChange = (val: number) => {
  searchData.value.pageSize = val;
  getTeacherList();
};
// 当用户点击修改表格页码时触发
const handleCurrentChange = (val: number) => {
  searchData.value.page = val;
  getTeacherList();
};

// element表格多选
const handleSelectionChange = (val:any) => {
  teacherIds.value = val;
  JSON.parse(JSON.stringify(teacherIds.value));
};
// 添加、编辑助教老师点击事件
const addTeacherTeam = async () => {
  let resData: any;
  if (props.action === 'add') {
    const list = teacherIds.value.map((item:any) => item.id);
    const data = {
      teachingTaskId,
      teacherIds: list,
      type: 2,
    };
    await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKTEACHER_MANAGE, data).post();
    ElMessage.success('添加成功');
    multipleTableRef.value!.clearSelection();
    props.getTeamList();
    await getTeamList();
  } else {
    const list = teacherIds.value.map((item:any) => item.schoolTeacher.id);
    const data = {
      teachingTaskId,
      teacherIds: list.toString(),
    };
    await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKTEACHER_MANAGE, null, {
      params: data,
    }).delete();
    ElMessage.success('删除成功');
    multipleTableRef.value!.clearSelection();
    props.getTeamList();
    await getTeamList();
  }
};

const openDialog = () => {
  dialogVisible.value = true;
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
.dia {
  div {
    margin-top: 20px;
    &:nth-child(1){
      margin-top: 0;
    }
    &:nth-child(3){
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
  }
}
</style>
